<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box1{width:300px;height:300px;background: red;position: absolute;left:0;right:0;top:0;bottom:0;margin: auto;}
    .box2{width:200px;height:200px;background: green;position: absolute;left:0;right:0;top:0;bottom:0;margin: auto;}
    .box3{width:100px;height:100px;background: blue;position: absolute;left:0;right:0;top:0;bottom:0;margin: auto;}
    span{width:30px;height:30px;background: yellow;position: absolute;left:0;right:0;top:0;bottom:0;margin: auto;}
  </style>
</head>
<body>

  <div class="box1">
    <div class="box2">
      <div class="box3">
        <span></span>
      </div>
    </div>
  </div>
  
</body>
<script>

  var box1 = document.querySelector(".box1");
  var box2 = document.querySelector(".box2");
  var box3 = document.querySelector(".box3");
  var span = document.querySelector("span");

  box1.onclick = function(eve){
    var e = eve || window.event;
    stopBubble( e );
    console.log("red的box1");
  }
  box2.onclick = function(eve){
    var e = eve || window.event;
    stopBubble( e );
    console.log("green的box2");
  }
  box3.onclick = function(eve){
    var e = eve || window.event;
    stopBubble( e );
    console.log("blue的box3");
  }
  span.onclick = function(eve){
    var e = eve || window.event;

    // 正常：
    // e.stopPropagation();
    // IE低版本：
    // e.cancelBubble = true;

    stopBubble( e )

    console.log("yellow的span");
  }


  function stopBubble( e ){
    if(e.stopPropagation){
      e.stopPropagation();
    }else{
      e.cancelBubble = true;
    }
  }
  
</script>
</html>